﻿@inherits System.Web.Mvc.WebViewPage<Pikapika.Models.ViewModels.Novel.NovelReadModel>

@{
    ViewBag.Title = String.Format("{0} / {2} - {1}", Model.Chapter.Name, Model.Chapter.NovelVolume.Name, Model.Chapter.NovelVolume.Novel.Name);
    ViewBag.BodyClassName = "mobile-hide-sidebar";
}

<div id="toggle-sidebar-button">
    <div class="hide-sidebar-text">
        <span class="arrow">
            &gt;&gt;
        </span>
        <span class="text">
            隐藏边栏
        </span>
    </div>
    <div class="show-sidebar-text">
        <span class="arrow">
            &lt;&lt;
        </span>
        <span class="text">
            显示边栏
        </span>
    </div>
</div>

<div id="content-wrap">
    <h2 class="chapter-name">
        @Model.Chapter.Name
    </h2>

    <div class="chapter-info">
        <div class="chapter-updated-time">
            更新 @Model.TimeZoneCorrectedUpdatedDate.ToString("yyyy-MM-dd HH:mm")
        </div>
        <div class="chapter-hit-count">
            点击 @Model.HitCount
        </div>
        <div class="chapter-post-user">
            UP主 @Model.Chapter.PostUserName
        </div>
    </div>

    <div class="reader-style">
        <span class="font-size-select">
            字体大小：
            <span class="font-size-0-75">小</span>
            <span class="font-size-1">中</span>
            <span class="font-size-1-25">大</span>
            <span class="font-size-1-5">特大</span>
        </span>
        <span class="back-color-select">
            阅读底色：
            <span class="#F5F5F5">&nbsp;</span>
            <span class="#FFFFFF">&nbsp;</span>
            <span class="#E9FAFF">&nbsp;</span>
            <span class="#FFFFED">&nbsp;</span>
            <span class="#FCEFFF">&nbsp;</span>
        </span>
    </div>

    <div class="autoscroll-hint">
        双击正文启动自动滚动，滚动时按键盘方向键上下可调节滚动速度
    </div>

    <div class="chapter-content">
        @{WriteLiteral(Model.Chapter.ChapterContent);}
    </div>

    <div class="chapter-navigation">
        @if (Model.PreviousChapter != null) {
            <span>
                @Html.ActionLinkForModel(Model.PreviousChapter,
                                         "<< 上一章",
                                         new RouteValueDictionary { 
                                            {"id", "link-prev-page"},
                                            {"title", "快捷键：←"}
                                         })
            </span>
        }
        <span>
            @Html.ActionLinkForModel(Model.Chapter.NovelVolume.Novel, "返回书页")
        </span>
        @if (Model.NextChapter != null) {
            <span>
                @Html.ActionLinkForModel(Model.NextChapter,
                                         "下一章 >>", 
                                         new RouteValueDictionary { 
                                            {"id", "link-next-page"},
                                            {"title", "快捷键：→"}
                                         })
                
            </span>
        }
    </div>
</div>

@section Head {
    @Html.Css("Novel/Read.css?20120305.5")
    @Html.Css("Novel/ReadMobile.css", (string)ViewBag.MobileMediaSelector)
    @Html.Script(StandardLibraries.Jquery)
    @Html.Script(StandardLibraries.JqueryUI)
    @Html.Script("jquery.cookie.js?20120305")
    <script type="text/javascript">
        //<![CDATA[
            chapterId = @Model.Chapter.Id;
            annotationListUrl = '@Url.Action("List", "Annotation", new { id = Model.Chapter.Id })';
            annotationAddUrl = '@Url.Action("Add", "Annotation")';
        //]]>
    </script>
    @Html.Script("Novel/Read.js?20120305.2")
}

@section Sidebar {
    <div id="annotation-container">
        <div id="annotation-loading">
            <p>吐槽加载中...</p>
        </div>
        <div id="annotation-post">
            <input type="text" maxlength="50" id="annotation-post-input" />
            <input type="button" id="annotation-post-submit" value="吐槽" />
            <input type="button" id="annotation-post-cancel" value="取消" />
            <div class="annotation-post-error">
                吐槽失败，请诅咒猴子的RP并稍后再试
            </div>
            <div class="annotation-post-no-content">
                无语是不行的（殴
            </div>
            <div class="annotation-post-sending"></div>
        </div>
        <div class="annotation-hint">
            提示：单击边栏区域可添加吐槽
        </div>
    </div>
}